@import "../../common/css/variables.scss";
@import "../../../common/css/size.scss";

.m-user {
  height: calc(100% - #{$navHeight});
  background: #F3F3F3;
  .info {
    .mheadPic {
      margin:$_20;
      width: $_88;
      height: $_90;
      box-shadow: 0 $_10 $_15 0 rgba(216, 221, 222, 0.50);
    }
    .name{
      font-size: $_20;
      color: #2D2E30;
      font-weight: bold;
      letter-spacing: $_5;
    }
    .userInfo{
      margin: $_10 $_20;
      li{
        margin-right: $_65;
      }
      li:last-child{
        margin-right: 0;
      }
      .lText{
        font-size: $_18;
        color: #3D3E41;
        font-weight: bold;
      }
      .sText{
        font-size: $_12;
        color: #868686;
        letter-spacing: $_1;
      }
    }
    .summary {
      margin-top: $_10;
      width: $_180;
    }
    .edit{
     margin-right: $_40;
    }
  }

  .navList {
    .btn_xl{
      margin: $_30 4%;
      border: none;
    }
    .navItemUl{
      background:  #fff;
      box-shadow: 0 $_2 $_7 0 rgba(205,210,212,0.50);
      border-radius: $_5;
      width: calc(100% - #{$_44});
      margin: 0 $_17;
      padding: 0 $_5;
      .navItem {
        height: $_48;
        //width: 100%;
        background: url('../img/common/select-right.png') no-repeat center right;
        background-size: $_8 $_16;
        border-bottom: $_1 solid #D8D8D8;
        .navIcon {
          width: $_22;
          height: 100%;
          margin: 0 0.3rem 0 0;
          background-size: $_20;
        }
        .navName {
          font-size: $_16;
          color: #3D3E41;
        }
      }
      .navItem:last-child{
        border-bottom: none;
      }
    }

    h4{
      font-size: $_16;
      color: #585859;
      letter-spacing: $_1;
      margin: $_16 $_20 ;
    }
   
    .mNews{
      background: url('../img/user/icon_news.png') no-repeat center;
      //background-size: $_19 $_22;
    }
    .mOrder{
      background: url('../img/user/icon_order.png') no-repeat center;
      //background-size: $_21 $_24;
    }
    .mClient{
      background: url('../img/user/icon_customer.png') no-repeat center;
      //background-size: $_22 $_25;
    }
    .mTeam{
      background: url('../img/user/icon_team.png') no-repeat center;
      //background-size: $_22 $_19;
    }
    .mWithdraw{
      background: url('../img/user/icon_wallet.png') no-repeat center;
    }
    .mDiscount{
      background: url('../img/user/icon_discount.png') no-repeat center;
    }
    .mTodo{
      background: url('../img/user/icon_item.png') no-repeat center;
      //background-size: $_22 $_20;
    }
    .mAsk{
      background: url('../img/user/icon_ask.png') no-repeat center;
      //background-size: $_22 $_18;
    }
    .mShop{
      background: url('../img/user/icon_shop.png') no-repeat center;
      //background-size: $_21 $_20;
    }
    .mAbout{
      background: url('../img/user/icon_about.png') no-repeat center;
    }
    .todoShowL{
      min-width: $_15;
      //height: $_15;
      //line-height: $_15;
      color: #fff;
      background: red;
      border-radius: $_10;
      //position: absolute;
      //right: $_30;
      margin-left: 57%;
      text-align: center;
      padding: 0.051rem 0.12rem; ;
      font-size: $_10;
      font-weight: bold;
    }
    .todoShow{
      width: $_15;
      height: $_15;
      line-height: $_15;
      color: #fff;
      background: red;
      border-radius: 50%;
      //position: absolute;
      //right: $_30;
      margin-left: 57%;
      text-align: center;
      padding: $_2 ;
      font-size: $_10;
      font-weight: bold;
    }
  }


}